<template>
	<div class="content">
		<!-- 汇总 -->
		<fieldset>
			<legend>汇总</legend>
			<div>
				<tbody>
					<tr>
						<td>
							<!--结算汇总(Estate):-->
							结算汇总(USDT):
							<span class="blue">{{ exuuAccrual == null ? "#" : exuuAccrual }}</span>
						</td>
					</tr>
				</tbody>
			</div>
		</fieldset>
		<div class="clear" style="padding-bottom:20px;">
			<Form :model="query" label-position="left" :label-width="100">
				<Input v-model="query.number" class="w200 m-r10" placeholder="项目编号" />
				<Input v-model="query.uuid" class="w200 m-r10" placeholder="个人ID" />
				<!-- <Select placeholder="请选状态" class="w200 m-r10" v-model="query.state">
          <Option value="0">请选择状态</Option>
          <Option value="1">进行中</Option>
          <Option value="2">已结算</Option>
        </Select>-->
				<DatePicker :value="dataValue" type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime"></DatePicker>
				<Button type="primary" v-on:click="getConditionQuery()">查询</Button>
				<!-- <Button type="primary" class="fr" @click="add">添加</Button> -->
			</Form>
		</div>
		<Table stripe :columns="columns1" :data="data1"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery" :current.sync="page"></Page>
		<!-- 添加 -->
		<!-- <Modal v-model="Modal" title="添加" width="40%">
      <Form :label-width="100" :model="addForm" :rules="rules" ref="refuse">
        <FormItem label="项目编号" prop="freight">
          <Input class="w-50" v-model="addForm.freight" placeholder="请输入项目编号" />
        </FormItem>
        <FormItem label="描述" prop="freight">
          <Input class="w-50" v-model="addForm.freight" placeholder="请输入描述" />
        </FormItem>
        <FormItem label="时间" prop="freight">
          <Input class="w-50" v-model="addForm.freight" placeholder="请输入时间" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="productCannel">取消</Button>
        <Button type="primary" size="large" @click="product">确定</Button>
      </div>
    </Modal>-->
		<!-- 修改 -->
		<!-- <Modal v-model="Modal1" title="修改" width="40%">
      <Form :label-width="100" :model="addForm" :rules="rules" ref="refuse">
        <FormItem label="项目编号" prop="freight">
          <Input class="w-50" v-model="addForm.freight" placeholder="请输入项目编号" />
        </FormItem>
        <FormItem label="描述" prop="freight">
          <Input class="w-50" v-model="addForm.freight" placeholder="请输入描述" />
        </FormItem>
        <FormItem label="时间" prop="freight">
          <Input class="w-50" v-model="addForm.freight" placeholder="请输入时间" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="productCannel">取消</Button>
        <Button type="primary" size="large" @click="product">确定</Button>
      </div>
    </Modal>-->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				page: 1,
				pageSize: 10,
				exuuAccrual: null, //结算汇总
				query: {},
				columns1: [{
						title: "项目编号",
						align:'center',
						key: "number"
					},
					{
						title: "个人ID",
						align:'center',
						key: "uuid"
					},
					{
						title: "账号",
						align:'center',
						key: "userName"
					},
					{
						title: "结算总额(usdt)",
						align:'center',
						key: "billing"
					},
					{
						title: "占比",
						align:'center',
						key: "ratio"
					},
//					{
//						title: "Estate单价",
//						align:'center',
//						key: "exuuPrice"
//					},
//					{
//						title: "结算数量(Estate)",
//						align:'center',
//						key: "num"
//					},
					{
						title: "结算数量(USDT)",
						align:'center',
						key: "num"
					},
					{
						title: "时间",
						align:'center',
						key: "createTime",
						render: (h, params) => {
							return h(
								"div",
								params.row.createTime === null ?
								"#" :
								this.stringToTime(params.row.createTime)
							);
						}
					}
					// {
					//   title: "操作",
					//   key: "action",
					//   width: 150,
					//   align: "center",
					//   render: (h, params) => {
					//     return h("div", [
					//       h(
					//         "Button",
					//         {
					//           props: {
					//             type: "primary",
					//             size: "small"
					//           },
					//           style: {
					//             marginRight: "5px"
					//           },
					//           on: {
					//             click: () => {
					//               this.Modal1 = true;
					//             }
					//           }
					//         },
					//         "修改"
					//       ),
					//       h(
					//         "Button",
					//         {
					//           props: {
					//             type: "error",
					//             size: "small"
					//           },
					//           on: {
					//             click: () => {
					//               this.Modal2 = true;
					//             }
					//           }
					//         },
					//         "删除"
					//       )
					//     ]);
					//   }
					// }
				],
				data1: [],
				Modal: false,
				addForm: [],
				Modal1: false,
				dataValue: ["", ""] //时间段
			};
		},
		methods: {
			//页面加载
			getbalance(page) {
				let obj = this.qs.stringify({
					current: page,
					size: this.pageSize,
					number: this.query.number,
					uuid: this.query.uuid,
					status: this.query.status,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + " 00:00:01", // 起始日期,
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + " 23:59:59" // 结束日期,
				});

				this.axios.post("/crowdfunding/billing/query", obj).then(res => {
					
					this.data1 = res.data.data.records;
					this.info = res.data.data.total;
				});
			},
			add() {
				this.Modal = true;
			},
			getTime(daterange) {
				// 处理时间段时间格式
				this.dataValue = daterange;
			}, //时间
			//查询
			getConditionQuery() {
				this.page = 1;
				this.getbalance(this.page);
			},
			//结算汇总
			getCollect() {
				this.axios.get("/crowdfunding/billing/sum").then(res => {

					this.exuuAccrual = res.data.data;
				});
			},
			cuctGetQuery() {
			
				this.getbalance(this.page)
			}
		},
		mounted() {
			this.getbalance(this.page);
			this.getCollect();
		}
	};
</script>

<style scoped>
	fieldset {
		margin-bottom: 20px;
	}
	
	.content {
		padding-left: 5px;
	}
</style>